<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="../css/demo.css" />
    
    <title>Jslet - 返回多数据集数据</title>
    <script type="text/javascript" data-main="../config.js" src="../lib/requirejs/require.min.js"></script>
    <script type="text/javascript">
	    require(['dataset/d-multidataset']);
    </script>
</head>
<body>
    <div class="demo-header">
    <h4 id="top">Jslet - 返回多数据集数据</h4>
	</div>
	<hr />
	<p><button id="btnQuery" class="btn btn-default btn-sm"> 查询 </button></p>
    <h4>员工列表</h4>
    <div data-jslet='type:"DBTable",dataset:"employee"' style="width: 100%; height: 200px">
    </div>

	<h4>部门列表</h4>
    <div data-jslet='type:"DBTable",dataset:"department"' style="width: 100%; height: 150px">
    </div>
	<div class="demo-desc">
	<p>为了提高性能，减少查询次数，可以一次返回多个数据集数据，以上演示是一次返回 “员工”数据和“部门”数据：</p>
	</div>
	<hr />
	<h4>源码</h4>
    <pre class="prettyprint linenums"><code>
	//datasetMetaStore定义在公共js:common/datasetmetastore.js中
	//将数据集定义信息仓库加到datasetFactory中，创建Dataset时会仓库里去定义信息
	jslet.data.datasetFactory.addMetaStore(window.datasetMetaStore);
	//通过工厂方法，可以自动创建主数据集及相关的数据集
    jslet.data.datasetFactory.createDataset('employee').done(function() {
		var dsEmployee = jslet.data.getDataset('employee');
		dsEmployee.queryUrl('/demo/employee/findEmployeeAndDepartment');
    	//清除“部门”数据集的本地数据以便接收服务端返回的数据
    	jslet.data.getDataset('department').records(null);
    	jslet.ui.install();
    });
    
    //绑定按钮事件
	$('#btnQuery').click(function() {
		var dsEmployee = jslet.data.getDataset('employee');
		dsEmployee.query();
	});
	</code></pre>

    <script type="text/javascript">
       window.LOADER_BASE_URL = "../lib/prettify";
    </script>
    <script type="text/javascript" src="../lib/prettify/run_prettify.js"></script>
		
</body>
</html>
